<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>选择器优势</title>
</head>
<body>
	<div id="tt"></div>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
	</ul>
	<table id="tb">
		<tbody>
			<tr><td>第一行</td><td>第一行</td></tr>
			<tr><td>第二行</td><td>第二行</td></tr>
			<tr><td>第三行</td><td>第三行</td></tr>
			<tr><td>第四行</td><td>第四行</td></tr>
			<tr><td>第五行</td><td>第五行</td></tr>
		</tbody>
	</table>
	<script type="text/javascript" src="../../zepto/src/zepto.min.js"></script>
	<script type="text/javascript">
		// 1、完善的处理机制

		// 传统写法：错误
		// document.getElementById("aa").style.color = 'red'; 

		// 传统写法：正确
		if(document.getElementById("aa")){
			document.getElementById("aa").style.color = 'red';	
		}

		// zepto却没有关系，因为它有完善机制，不会报错
		$("#aa").css("color" , 'red');

		// 2、当检测某个元素是否存在的时候

		// 不当使用，因为就算id为aa不存在，$("#aa")也会是个对象，那么就会为真
		if($("#aa")){
			console.log(111)
		}

		// 正确使用
		if($("#aa").length > 0){
			console.log(222)
		}

		// 3、事件写法

		// 传统写法
		var items = document.getElementsByTagName("li");
		for (var i = 0; i < items.length; i++) {
			items[i].onclick = function(){
				alert(1)
			}
		}

		// zepto写法
		$("li").on("click" , function(){
			alert(2)
		})

		// 4、特定表格隔行变色

		// 传统写法
		var item = document.getElementById("tb");
		var tbody = item.getElementsByTagName("tbody")[0]
		var trs = tbody.getElementsByTagName("tr");
		for (var i = 0; i < trs.length; i++) {
			if(i%2 == 0){
				trs[i].style.backgroundColor = "#888";
			}
			
		}

		// zepto写法
		$("#tb tbody tr:nth-child(odd)").css("backgroundColor" , "red");

	</script>
</body>
</html>